<template>
	<view class="content">
		<view class="addressBox" v-for="(item, index) in addressList" :key="index" @click="selectAddress(item)">
			<p class="name">{{ item.receivingName }} {{ item.receivingPhoneNumber }}</p>
			<p class="address">
				{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.detailedAddress }}
			</p>
			<view class="addressBottom">
				<view class="leftRadio">
					<view class="custom-radio" :class="{ 'checked': item.state == 1 }">
						<radio style="opacity: 0;" :value="item.id" :checked="item.state == 1"
							@click.stop="setDefault(item.id, item.state)" />
					</view>
					<p style="padding-top: 2rpx;">{{ item.state == 1 ? '已默认' : '设置为默认' }}</p>
				</view>
				<view class="button" @click.stop="deleteAddress(item.id)">删除</view>
				<view class="button" @click.stop="copyAddress(item)">复制</view>
				<view class="button" @click.stop="goEdit(item)">修改</view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="button" @click="goAdd">新增收货地址</view>
		</view>
		<view v-if="!addressList.length">
			<image style="margin:10%;" src='../../../static/null/null.png'></image>
		</view>
		<view v-if="loadingMore" class="loading-more">加载中...</view>
		<view v-if="!hasMore && !loadingMore" class="no-more">没有更多了</view>
	</view>
</template>

<script>
	import {
		getAddressList,
		editAddress,
		delAddress
	} from '@/api/address.js';

	export default {
		data() {
			return {
				addressList: [],
				selectMode: false,
				returnPage: '',
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页大小
				hasMore: true, // 是否还有更多数据
				loadingMore: false, // 正在加载更多数据
			};
		},
		onLoad(options) {
			this.selectMode = options.selectAddr === 'true';
			if (this.selectMode) {
				this.returnPage = options.returnPage || '';
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				this.loadingMore = true;
				getAddressList(this.pageSize,this.pageNum).then(res => {
					const newData = res.data.records.map(item => ({
						...item,
						state: item.state || 0
					}));
					if (newData.length < this.pageSize) {
						this.hasMore = false; // 如果返回的数据少于每页大小，则表示没有更多数据
					}
					this.addressList = this.pageNum === 1 ? newData : [...this.addressList, ...newData];
					this.loadingMore = false;
				}).catch(err => {
					console.error('获取地址列表失败:', err);
					this.loadingMore = false;
				});
			},

			setDefault(id, currentState) {
				const state = currentState === 1 ? 0 : 1;
				const params = {
					id: id,
					state: state,
					
				};
				editAddress(params).then(() => {
					this.addressList = this.addressList.map(item => ({
						...item,
						state: item.id === id ? state : (state === 1 ? 0 : item.state)
					}));
				});
			},
			deleteAddress(id) {
				const params = {
					id: id
				};
				delAddress(params).then((res) => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.getList()
				});
			},
			copyAddress(address) {
				const fullAddress =
					`${address.receivingName} ${address.receivingPhoneNumber}\n${address.provinceName}${address.cityName}${address.districtName}${address.detailedAddress}`;
				uni.setClipboardData({
					data: fullAddress,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: function(err) {
						console.error('复制失败', err);
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			goEdit(address) {
				uni.navigateTo({
					url: `editAddress?id=${address.id}`
				});
			},
			goAdd() {
				uni.navigateTo({
					url: 'addAddress'
				});
			},
			selectAddress(address) {
				if (!this.selectMode) return;

				const data = {
					addressId: address.id,
					receivingName: address.receivingName,
					receivingPhoneNumber: address.receivingPhoneNumber,
					provinceName: address.provinceName,
					cityName: address.cityName,
					districtName: address.districtName,
					detailedAddress: address.detailedAddress
				};

				uni.navigateBack({
					delta: 1,
					success: () => {
						uni.$emit('addressSelected', data);
					}
				});
			}
		},
		onReachBottom() {
			if (!this.hasMore || this.loadingMore) return;
			this.pageNum++;
			this.getList();
		}
	};
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: #F3F3F3;
		position: relative;
		padding: 1rpx 1rpx 120rpx 1rpx;
	}

	.addressBox {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;

		.name {
			font-weight: bold;
		}

		.address {
			margin: 20rpx 0rpx;
		}

		.addressBottom {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.leftRadio {
				width: 50%;
				display: flex;
				font-size: 24rpx;
				line-height: 40rpx;
			}

			.custom-radio {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #ccc;
				/* 默认边框颜色 */
				background-color: #fff;
				display: inline-block;
			}

			.custom-radio::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) scale(0);
				width: 60%;
				height: 60%;
				border-radius: 50%;
				background-color: #007aff;
				/* 选中后的背景颜色 */
				transition: all 0.3s ease-in-out;
			}

			.custom-radio.checked::after {
				transform: translate(-50%, -50%) scale(1);
				/* 当选中时，显示内圆 */
			}

			.button {
				width: 100rpx;
				height: 40rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 40rpx;
				background-color: none !important;
				margin: 4rpx 0rpx 0rpx 10rpx;
			}
		}
	}

	.bottomBox {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;
		display: flex;

		.button {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #007aff;
			color: white;
			border-radius: 80rpx;
			margin: 20rpx auto;
		}
	}

	.loading-more,
	.no-more {
		text-align: center;
		margin-top: 20rpx;
		color: #999;
	}
</style>